<template>
    <div id="login">
        <div class="content">

            <div class="content_input">
                <div class="title">
                    <p>用户注册</p>
                </div>
                <el-input v-model="username" clearable placeholder="用户名"></el-input>
                <el-input v-model="email" clearable placeholder="用户邮箱"></el-input>
                <el-input v-model="password" clearable show-password placeholder="输入密码"></el-input>
                <el-input v-model="rePass" clearable show-password placeholder="确认密码"></el-input>
                <div>
                    <el-input style="width:120px;float: left" v-model="code" clearable placeholder="验证码"></el-input>
                    <img v-bind:src="codeUrl" style="cursor: pointer" @click="nextCode" class="codeImage" alt=""/>
                </div>
                <div>
                    <el-button type="primary" style="height: 45px!important;" @click="SignIn">注册</el-button>
                </div>
                <div class="other">
                    <router-link to="/login" style="float: left" v-model="code">登录账号</router-link>
                    <router-link to="/login" style="float: right" v-model="code">忘记密码</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {signIn} from "@/api";
import {ElMessage} from "element-plus";

export default {
    name: "Login",
    data() {
        return {
            rePass: '',
            email: '',
            username: '',
            password: '',
            code: '',
            codeUrl: '/api/common/verifyCode',
        }
    },
    computed: {},
    watch: {},
    methods: {
        nextCode() {
            var num = Math.ceil(Math.random() * 10);//生成一个随机数（防止缓存）
            this.codeUrl = '/api/common/verifyCode?c=' + num;
        },
        SignIn() {
            var that = this;
            if (that.verifyInput()) {
                signIn(that.username.trim(), that.password.trim(), that.email.trim(), that.code.trim())
                    .then(res => {
                        if (res.code === 200) {
                            ElMessage.success({
                                message: '登录成功',
                                type: 'success'
                            });
                            that.$router.back()
                        } else {
                            this.$notify.error({
                                title: '注册失败',
                                message: res.message
                            });
                        }
                    })
                    .catch(err => {
                        this.$notify.error({
                            title: '注册失败',
                            message: err.message
                        });
                    })
            }
        },
        verifyInput() {
            const that = this;
            if (!that.username) {
                this.$notify.error({
                    title: '注册失败',
                    message: '请输入用户名'
                });
            } else if (!that.email) {
                this.$notify.error({
                    title: '注册失败',
                    message: '请输入用户邮箱'
                });
            } else if (!that.password) {
                this.$notify.error({
                    title: '注册失败',
                    message: '请输入登陆密码'
                });
            } else if (!that.rePass) {
                this.$notify.error({
                    title: '注册失败',
                    message: '请确认密码'
                });
            } else if (!that.code) {
                this.$notify.error({
                    title: '注册失败',
                    message: '请输入验证码'
                });
            } else if (that.password.trim() !== that.rePass.trim()) {
                this.$notify.error({
                    title: '注册失败',
                    message: '密码不一致'
                });
            } else {
                return true;
            }
            return false;
        }
    }
}
</script>

<style lang="scss" scoped>

.el-button--primary {
    width: 100%;

}

.el-input {
    margin-bottom: 25px;
}

.codeImage {
    border-radius: 10px;
    float: right;
    height: 40px;
    width: 120px;
    border: #a8a8a8 1px solid;
}

.title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: bold;
    color: #606266;
}

.content_input {
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.content_button {
    height: 60px !important;
    margin-top: 10px;
}


.content {
    width: 500px;
    height: 550px;
    max-height: 550px;
    box-sizing: border-box;
    padding: 0 50px;
    border-radius: 20px;
    box-shadow: 0px 2px 12px 0px rgba(105, 105, 105, 0.07);
    background: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: mymove 1s ease-in-out alternate;
    overflow: hidden;
    transition: 1s;
}

.el-input /deep/ .el-input__inner {
    border-radius: 10px !important;
}

.el-button {
    border-radius: 20px !important;
}

#login {
    background: url("../../assets/img/home/background.jpg");
    height: 1010px;
}

.other {
    margin-top: 30px;
    margin-bottom: 20px;
}

a {
    text-decoration: none;
    color: black;
    cursor: pointer;
}

@keyframes mymove {
    0% {
        width: 0px;
        height: 5px;
    }

    10% {
        width: 50px;
        height: 55px;
    }

    15% {
        width: 100px;
        height: 82px;
    }

    20% {
        width: 150px;
        height: 110px;
    }

    25% {
        width: 200px;
        height: 137px;
    }

    30% {
        width: 250px;
        height: 165px;
    }

    35% {
        width: 300px;
        height: 192px;
    }

    40% {
        width: 350px;
        height: 220px;
    }

    45% {
        width: 450px;
        height: 247px;
    }

    50% {
        width: 500px;
        height: 275px;
    }

    55% {
        height: 302px;
    }

    60% {
        height: 330px;
    }

    65% {
        height: 357px;
    }

    70% {
        height: 385px;
    }

    75% {
        height: 412px;
    }

    80% {
        height: 440px;
    }

    85% {
        height: 467px;
    }

    90% {
        height: 495px;
    }

    95% {
        height: 522px;
    }

    100% {
        height: 550px;
    }
}
</style>